<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import DSLogo from '@/components/DSLogo.vue'
import { VerifyIcon, InfoCircleIcon, UsergroupIcon, EducationIcon } from 'tdesign-icons-vue-next'
import { Icon, MessagePlugin, DialogPlugin } from 'tdesign-vue-next'
import http from '@/utils/http.js'

onMounted(() => {
  http.get('/users/login/test').then((res) => console.log(res))
})

// 路由跳转
const router = useRouter()

/**
 * 身份验证模块
 */

// 身份选择模块
const identityDalogVisible = ref(false) // 身份选择dilog
// 身份选择框取消事件
const identityDalogcancel = () => {
  identityDalogVisible.value = false
  identityData.identityType = ''
}
// 身份选择框关闭事件
const identityDalogClose = () => (identityDalogVisible.value = false)
// 身份选择框确认事件
const identityDalogConfirm = () => {
  if (identityData.identityType === '') {
    MessagePlugin.error({ content: '请您选择身份类型！' })
    return
  }
  identityDalogVisible.value = false
  isIdentity.value = true
}
// 修改身份类型
const identityChange = () => {
  const changeDalog = DialogPlugin({
    header: '身份类型修改提示',
    body: '您所填写的相关信息将不会被保存，确认更改身份类型吗?',
    confirmBtn: '确认更改身份',
    cancelBtn: '继续完善信息',
    onConfirm: () => {
      identityFrom.value.reset()
      identityFrom.value.clearValidate()
      changeDalog.hide()
      isIdentity.value = false
      identityDalogVisible.value = true
    },
    onClose: () => changeDalog.hide()
  })
}

// 身份信息填写模块
const identityFrom = ref() // 表单
const isIdentity = ref(false) // 身份认证
const identityDataModel = {
  identityType: '',
  identityStudent: {
    collegeName: '',
    name: '',
    cards: '',
    candidate: '',
    number: ''
  },
  identityOfficer: {
    collegeName: '',
    name: '',
    cards: '',
    jobType: '',
    number: ''
  }
}
const identityData = reactive({ ...identityDataModel })
// 表单效验规则
const identityDataRules = {
  identityStudentRules: {
    collegeName: [
      { required: true, message: '高校名称必填', type: 'error', trigger: 'blur' },
      { required: true, message: '高校名称必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '高校名称不能为空' },
      { min: 4, message: '高校名称过短', type: 'error', trigger: 'blur' },
      { max: 15, message: '高校名称过长', type: 'error', trigger: 'blur' }
    ],
    name: [
      { required: true, message: '身份姓名必填', type: 'error', trigger: 'blur' },
      { required: true, message: '身份姓名必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '姓名不能为空' },
      { min: 2, message: '身份姓名长度过短', type: 'error', trigger: 'blur' }
    ],
    cards: [
      { required: true, message: '身份证号必填', type: 'error', trigger: 'blur' },
      { required: true, message: '身份证号必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '身份证号不能为空' },
      { min: 18, message: '身份证件格式不合法', type: 'error', trigger: 'blur' },
      { max: 20, message: '身份证件格式不合法', type: 'error', trigger: 'blur' }
    ],
    candidate: [
      { required: true, message: '高考考号必填', type: 'error', trigger: 'blur' },
      { required: true, message: '高考考号必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '高考考号不能为空' }
    ],
    number: [
      { required: true, message: '学生学号必填', type: 'error', trigger: 'blur' },
      { required: true, message: '学生学号必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '学生学号不能为空' }
    ]
  },
  identityOfficerRules: {
    collegeName: [
      { required: true, message: '高校名称必填', type: 'error', trigger: 'blur' },
      { required: true, message: '高校名称必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '高校名称不能为空' },
      { min: 4, message: '高校名称过短', type: 'error', trigger: 'blur' },
      { max: 15, message: '高校名称过长', type: 'error', trigger: 'blur' }
    ],
    name: [
      { required: true, message: '身份姓名必填', type: 'error', trigger: 'blur' },
      { required: true, message: '身份姓名必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '姓名不能为空' },
      { min: 2, message: '身份姓名长度过短', type: 'error', trigger: 'blur' }
    ],
    cards: [
      { required: true, message: '身份证号必填', type: 'error', trigger: 'blur' },
      { required: true, message: '身份证号必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '身份证号不能为空' },
      { min: 18, message: '身份证件格式不合法', type: 'error', trigger: 'blur' },
      { max: 20, message: '身份证件格式不合法', type: 'error', trigger: 'blur' }
    ],
    jobType: [
      { required: true, message: '工作职位必填', type: 'error', trigger: 'blur' },
      { required: true, message: '工作职位必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '工作职位不能为空' },
      { min: 2, message: '工作职位不符合格式', type: 'error', trigger: 'blur' },
      { max: 10, message: '工作职位不符合格式', type: 'error', trigger: 'blur' }
    ],
    number: [
      { required: true, message: '职工编号必填', type: 'error', trigger: 'blur' },
      { required: true, message: '职工编号必填', type: 'error', trigger: 'change' },
      { whitespace: true, message: '职工编号不能为空' }
    ]
  }
}

// 抽屉取消
const identityDrawerCancel = () => {
  const cancelDalog = DialogPlugin({
    header: '身份认证信息提示',
    body: '您所填写的相关信息将不会被保存，确认退出身份认证吗?',
    confirmBtn: '确认',
    cancelBtn: '取消',
    onConfirm: () => {
      identityData.identityType = ''
      identityFrom.value.reset()
      identityFrom.value.clearValidate()
      cancelDalog.hide()
      isIdentity.value = false
      identityDalogVisible.value = false
    },
    onClose: () => cancelDalog.hide()
  })
}
// 开始身份认证
const identityDrawerConfirm = () => {
  identityFrom.value.validate().then((res) => {
    if (res !== true) {
      MessagePlugin.error({ content: '请按照要求认真填写表单信息' })
      return
    }
    const confirmDalog = DialogPlugin({
      header: '身份验证信息提示',
      body: '请确认您的身份认证信息填写无误，确认无误后点击开始验证即可进行身份验证',
      confirmBtn: '确认信息无误',
      cancelBtn: '返回更改信息',
      onConfirm: () => {},
      onClose: () => confirmDalog.hide()
    })
  })
}

/**
 * 基础信息模块
 */

const isBasicInfo = ref(false) // 基础信息

const identityDrawer = () => {
  console.log(isBasicInfo.value)
  identityDalogVisible.value = true
}
</script>

<template>
  <t-layout class="container">
    <t-header class="header" height="64px">
      <DSLogo style="margin-right: auto"></DSLogo>
      <t-button theme="default" variant="text" shape="square" class="icon-btn">
        <icon name="logo-github" />
      </t-button>
      <t-button theme="default" variant="text" shape="square" class="icon-btn">
        <icon name="help-circle" />
      </t-button>
      <t-button
        theme="default"
        variant="text"
        shape="square"
        class="icon-btn"
        style="margin-right: 30px"
      >
        <icon name="setting" />
      </t-button>
    </t-header>
    <t-layout class="context">
      <t-aside width="580px" style="background: none" class="aside">
        <t-space direction="vertical" class="space">
          <p class="text" style="font-size: 45px">注册 RadianceM</p>
          <p class="text" style="font-size: 35px">数字化公寓选调系统</p>
          <t-space direction="horizontal" size="4">
            <p style="color: rgb(173, 173, 173)">已有账号？</p>
            <t-link theme="default" @click="router.push('/login/byPassword')">登录</t-link>
          </t-space>
          <p>注册需要分别完成 身份认证 与 基础信息 表单</p>
        </t-space>
        <t-space direction="vertical" style="width: 75%">
          <t-card
            subtitle="Identity authentication"
            size="small"
            @click="identityDrawer"
            header
            bordered
            hover-shadow
          >
            <template #title>
              <icon name="portrait" style="margin: 0px 5px" />
              身份信息认证
            </template>
          </t-card>
          <t-card
            subtitle="The completeness of basic information"
            size="small"
            header
            bordered
            hover-shadow
          >
            <template #title>
              <icon name="assignment" style="margin: 0px 5px" />
              基础信息完善
            </template>
          </t-card>
          <t-button size="large" style="width: 100%; margin: 15px 0">注册</t-button>
          <p style="color: rgb(126, 126, 126)">
            Copyright @ 2023 RadianceM K2-410. All Rights Reserved
          </p>
        </t-space>
      </t-aside>
      <t-content></t-content>
    </t-layout>
    <t-footer height="12px" class="footer"></t-footer>
    <!-- 身份选择对话框 -->
    <t-dialog
      placement="center"
      confirmBtn="确认身份"
      cancel-btn="取消验证"
      :closeOnOverlayClick="false"
      :confirmOnEnter="true"
      :on-close="identityDalogClose"
      :onCancel="identityDalogcancel"
      :visible="identityDalogVisible"
      :on-confirm="identityDalogConfirm"
    >
      <template #header>
        <t-space direction="vertical" size="2">
          <t-space>
            <VerifyIcon />
            身份类型选择
          </t-space>
          <p style="font-size: 10px; font-weight: 100">系统将会根据用户身份类型进行服务区分</p>
        </t-space>
      </template>
      <t-space direction="vertical">
        为了不影响您的使用体验，请根据您的身份类型选择相应的选项，并填写相关信息，以完成身份认证。
        <t-space style="width: 100%">
          <t-card
            title="学生身份"
            @click="identityData.identityType = '学生'"
            :style="identityData.identityType === '学生' ? 'border-color: rgb(0, 115, 255);' : ''"
            bordered
            :hover-shadow="identityData.identityType !== '学生'"
          >
          </t-card>
          <t-card
            title="职工身份"
            @click="identityData.identityType = '职工'"
            :style="identityData.identityType === '职工' ? 'border-color: rgb(0, 115, 255);' : ''"
            bordered
            :hover-shadow="identityData.identityType !== '职工'"
          >
          </t-card>
        </t-space>
      </t-space>
    </t-dialog>

    <!-- 身份信息抽屉 -->
    <t-drawer :closeOnOverlayClick="false" v-model:visible="isIdentity" size="500px">
      <template #header>
        <icon name="portrait" style="margin: 0px 10px" />
        身份信息认证
        <t-divider layout="vertical" />
        Identity authentication
      </template>
      <template #cancelBtn>
        <t-button variant="outline" @click="identityDrawerCancel">退出身份认证</t-button>
      </template>
      <template #confirmBtn>
        <t-button theme="primary" @click="identityDrawerConfirm">开始身份认证</t-button>
      </template>

      <t-form
        class="form"
        ref="identityFrom"
        v-if="identityData.identityType == '学生'"
        :data="identityData.identityStudent"
        :rules="identityDataRules.identityStudentRules"
      >
        <t-card size="small" style="width: 96%; margin-left: auto; margin-bottom: 20px" hoverShadow>
          <template #title>身份卡片<EducationIcon style="margin: 0px 5px" /></template>
          <template #actions>
            <t-button theme="default" size="small" @click="identityChange">
              <template #icon><VerifyIcon /></template>
              修改身份
            </t-button>
          </template>
          <t-space>
            <img src="../../assets/img/type-students.svg" style="width: 180px" />
            <t-space direction="vertical">
              <b>您的身份为：{{ identityData.identityType }}</b>
              <p style="font-size: 14px; color: rgb(134, 134, 134)">
                在本系统中，学生需要配合学校工作完成宿舍选调模块任务
              </p>
              <p style="font-size: 10px; color: rgb(170, 170, 170); margin-top: 10px">
                <InfoCircleIcon />
                实际请以注册高校颁发任务方案为准
              </p>
            </t-space>
          </t-space>
        </t-card>

        <t-form-item label="就读高校" name="collegeName" style="width: 100%">
          <t-input
            v-model="identityData.identityStudent.collegeName"
            placeholder="请输入您的学校名称"
          />
        </t-form-item>
        <t-form-item label="身份姓名" name="name" style="width: 100%">
          <t-input v-model="identityData.identityStudent.name" placeholder="请输入您的姓名" />
        </t-form-item>
        <t-form-item label="身份证件" name="cards" style="width: 100%">
          <t-input
            v-model="identityData.identityStudent.cards"
            placeholder="请输入您的身份证号码"
          />
        </t-form-item>
        <t-form-item label="高考考号" name="candidate" style="width: 100%">
          <t-input
            v-model="identityData.identityStudent.candidate"
            placeholder="请输入您的高考考生号"
          />
        </t-form-item>
        <t-form-item label="高校学号" name="number" style="width: 100%">
          <t-input
            v-model="identityData.identityStudent.number"
            placeholder="请输入您现所就读高校中您的学生编号"
          />
        </t-form-item>
      </t-form>

      <t-form
        class="form"
        ref="identityFrom"
        v-if="identityData.identityType == '职工'"
        :data="identityData.identityOfficer"
        :rules="identityDataRules.identityOfficerRules"
      >
        <t-card size="small" style="width: 96%; margin-left: auto; margin-bottom: 20px" hoverShadow>
          <template #title>身份卡片<EducationIcon style="margin: 0px 5px" /></template>
          <template #actions>
            <t-button theme="default" size="small" @click="identityChange">
              <template #icon><UsergroupIcon /></template>
              修改身份
            </t-button>
          </template>
          <t-space>
            <img src="../../assets/img/type-officer.svg" style="width: 180px" />
            <t-space direction="vertical">
              <b>您的身份为：{{ identityData.identityType }}</b>
              <p style="font-size: 14px; color: rgb(134, 134, 134)">
                在本系统中，职工按照学校工作要求完成选调分配任务以及学生管理模块任务
              </p>
              <p style="font-size: 10px; color: rgb(170, 170, 170); margin-top: 10px">
                <InfoCircleIcon />
                实际请以注册高校颁发任务方案为准
              </p>
            </t-space>
          </t-space>
        </t-card>

        <t-form-item label="就职高校" name="collegeName" style="width: 100%">
          <t-input
            v-model="identityData.identityOfficer.collegeName"
            placeholder="请输入您的学校名称"
          />
        </t-form-item>
        <t-form-item label="身份姓名" name="name" style="width: 100%">
          <t-input v-model="identityData.identityOfficer.name" placeholder="请输入您的姓名" />
        </t-form-item>
        <t-form-item label="身份证件" name="cards" style="width: 100%">
          <t-input
            v-model="identityData.identityOfficer.cards"
            placeholder="请输入您的身份证号码"
          />
        </t-form-item>
        <t-form-item label="工作职位" name="jobType" style="width: 100%">
          <t-input
            v-model="identityData.identityOfficer.jobType"
            placeholder="请输入您的工作职位"
          />
        </t-form-item>
        <t-form-item label="职工编号" name="number" style="width: 100%">
          <t-input
            v-model="identityData.identityOfficer.number"
            placeholder="请输入您现所就职的高校中您的职工编号"
          />
        </t-form-item>
      </t-form>
    </t-drawer>
  </t-layout>
</template>

<style scoped lang="scss">
@import '../../style/common.scss';
.container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  background-color: rgb(255, 255, 255);
  background-image: url('../../assets/img/loginBackground.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .header {
    @include cf;
    flex-direction: row;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.1);

    .icon-btn {
      margin: 0 10px;
    }
  }

  .context {
    position: relative;
    background: none;

    .aside {
      position: relative;
      @include cf;
      flex-direction: column;

      .space {
        position: relative;
        @include cf;
        width: 85%;
        padding: 0;
        margin: 15px 0px;
        .text {
          margin: 10px 0;
        }
      }
    }
  }

  .form {
    width: 90%;
    height: 100%;
    @include cf;
    flex-direction: column;
  }

  .footer {
    margin-top: auto;
    backdrop-filter: blur(20px);
    background-color: white;
    background-color: rgba(255, 255, 255, 0.02);
  }
}
</style>
